<template>
  <view class="y-filter">
    <view class="drop-down__tab" :style="{ top: headerHeight + 'px' }">
      <template v-for="v in tabItems" :key="v.type">
        <view :class="['drop-down__tabItem', v.type === proDropType && 'drop-down__tabItem--active']" @click="btnDropChange(v.type, v.api)">
          <text>{{ v.title }}</text>
          <view class="ali-icon">&#xe6c7;</view>
        </view>
      </template>
    </view>
    <TuiTopDropdown v-model="dropShow" :paddingbtm="110" :translateyPx="translatey" @close="btnCloseDrop">
      <scroll-view class="tui-scroll-box" scroll-y scroll-with-animation :scroll-top="scrollTop">
        <view class="tui-seizeaseat-20"></view>
        <view class="tui-drop-item" :class="[item.selected ? 'tui-bold' : '']" v-for="(item, index) in proDropData" :key="index" @tap.stop="btnSelected(index, item.selected)">
          <text v-if="item.selected" class="ali-icon">&#xed1d;</text>
          <text class="tui-ml tui-middle">{{ item.name }}</text>
        </view>
      </scroll-view>
      <view class="drop-btns">
        <button class="button rest-btn" type="none" @click="restFnc">重置</button>
        <button class="button confirm-btn" type="primary" @click="submitFnc">确定</button>
      </view>
    </TuiTopDropdown>
  </view>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import { reactive, ref, watch } from 'vue';
  import TuiTopDropdown from '@/components/TuiTopDropdown/index.vue';
  import { areaList, downList } from '@/api';

  const props = defineProps({
    headerHeight: propTypes.number.def(0),
  });

  const emit = defineEmits(['submit'])

  const tabItems = ref([
    {
      title: '区域',
      type: 'area',
      api: areaList,
    },
    {
      title: '类别',
      type: 'memberType',
      api: downList,
    },
    {
      title: '职务',
      type: 'memberLevel',
      api: downList,
    },
    {
      title: '行业',
      type: 'industry',
      api: downList,
    },
    // {
    //   title: '等级',
    //   type: 'levelId',
    //   api: SYS_RATING,
    // },
    // {
    //   title: '服务人',
    //   type: 'server',
    //   api: currentService,
    // },
  ]);

  const translatey = ref(props.headerHeight + uni.upx2px(88));
  watch(
    () => props.headerHeight,
    (val) => {
      translatey.value = val + uni.upx2px(88);
    },
  );
  /** 下拉筛选控件相关 */
  interface IData {
    selected: boolean;
    name: string;
    id: number;
    dictValue: string;
  }
  const proDropList = reactive<{ [x: string]: IData[] }>({
    area: [],
    memberType: [],
    memberLevel: [],
    industry: [],
    levelId: [],
    server: [],
  });
  const proDropData = ref<IData[]>([]);
  const dropShow = ref(false);
  const scrollTop = ref(0);
  const proDropType = ref('');
  function btnCloseDrop() {
    dropShow.value = false;
    proDropType.value = '';
  }
  function btnSelected(index: number, selected: boolean) {
    proDropList[proDropType.value][index].selected = !selected;
  }
  async function btnDropChange(type: string, api: (type?: string) => Promise<any>) {
    await _getData(type, api);
    proDropType.value = type;
    proDropData.value = proDropList[type];
    dropShow.value = true;
  }

  async function _getData(type: string = 'area', api: (type?: string) => Promise<any> = areaList) {
    if (proDropList[type].length > 0) return;
    return api(type).then((r: any[]) => {
      proDropList[type] = r.map((v) => {
        if (v.dictLabel) v.name = v.dictLabel;
        v.selected = false;
        return v;
      });
    });
  }
  _getData();

  /** 重置所有选中 */
  function restFnc() {
    for (const k in proDropList) {
      proDropList[k].forEach((v) => v.selected && (v.selected = false));
    }
    emit('submit', {})
    btnCloseDrop()
  }

  /** 提交选中内容 */
  function submitFnc() {
    let listParams: { [x: string]: (string | number)[] } = {};
    for (const k in proDropList) {
      let strArr: (string | number)[] = [];
      proDropList[k].forEach((v) => {
        if (v.selected) k === 'levelId' ? strArr.push(v.dictValue) : strArr.push(v.id);
      });
      if (strArr.length <= 0) continue;
      let keys = strArr
      // 筛选条件写入
      switch (k) {
        case 'memberType': // 组织类别
          listParams['typeId'] = keys;
          break;
        case 'industry': // 行业管理
          listParams['industryId'] = keys;
          break;
        case 'memberLevel': // 会员级别
          listParams['levelId'] = keys;
          break;
        case 'area': // 区域
          listParams['areaId'] = keys;
          break;
        case 'server': // 专员
          listParams['server'] = keys;
          break;
        case 'levelId': // 评级
          listParams['rating'] = keys;
          break;
      }
    }
    emit('submit', JSON.parse(JSON.stringify(listParams)))
    btnCloseDrop()
  }
</script>

<style lang="scss" scoped>
  .y-filter {
    height: 88rpx;
  }

  .drop-down {
    &__tab {
      width: 750rpx;
      height: 88rpx;
      background-color: #fff;
      display: flex;
      align-items: center;
      position: relative;
      z-index: 998;
      position: fixed;
      left: 0;
    }
    &__tabItem {
      color: #808080;
      font-size: 27rpx;
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      > .ali-icon {
        margin-left: 6rpx;
        font-size: 32rpx;
        color: #aaabab;
        transform: rotateZ(90deg);
        transition: all 0.3s;
      }
    }
    &__tabItem--active {
      background-color: #f2f2f2;
      color: #000;
      > .ali-icon {
        color: #000;
        transform: rotateZ(270deg);
      }
    }
  }

  .tui-scroll-box {
    width: 100%;
    height: 480rpx;
    box-sizing: border-box;
    position: relative;
    z-index: 99;
    color: #fff;
    font-size: 30rpx;
    word-break: break-all;
  }
  .tui-seizeaseat-20 {
    height: 20rpx;
  }
  .tui-drop-item {
    color: #333;
    height: 80rpx;
    font-size: 28rpx;
    padding: 20rpx 40rpx 20rpx 40rpx;
    box-sizing: border-box;
    display: inline-block;
    width: 50%;
  }
  .tui-middle {
    vertical-align: middle;
  }
  .tui-drop-item .tui-icon-class {
    vertical-align: middle;
  }
  .tui-bold {
    font-weight: bold;
    color: #ef823a;
    .ali-icon {
      color: #ef823a;
    }
  }
  .tui-ml {
    margin-left: 6rpx;
  }

  .drop-btns {
    height: 100rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    > .button {
      flex: 1;
      text-align: center;
      line-height: 100rpx;
      border-radius: 0;
    }
    .confirm-btn {
      background-color: #ef823a;
    }
  }
</style>
